<template lang="pug">
.works-dialog
  el-dialog(
    title="所有作品"
    :visible.sync="showModal"
    top="10vh"
    width="960px"
    :before-close="beforeCloseHandler")
    .work-group.clearfix
      span 分类选择：
      el-select(v-model='curWorkLabel', placeholder='请选择', @change="changeWorks")
        el-option(v-for='(item, index) in getWorksList', :key='index', :label='item.name', :value='item.groupid')
    el-row
      el-col(:span='6', v-for='(item, index) in getCurWorkData', :key='index')
        el-card(:body-style="{ padding: '0px' }")
          .img-box(@click="switchWork(item.panoview_url)")
            img(:src='item.icon_src', alt="")
          div(style='padding: 14px;', @click="switchWork(item.panoview_url)")
            p.name.omit {{item.pano_name}}
    span.dialog-footer(slot="footer")
      Pagination(:count='getDataLength', :currentpage='pageIndex', :pagesize="pageSize", @handlePageChange='handlePageChange')
      el-button(size="small", @click="closeModal") 关 闭
</template>

<script>
import modalMixin from '@/mixins/modal'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import { setTimeout } from 'timers';
export default {
  name: 'worksModal',
  mixins: [modalMixin],
  data() {
    return {
      showModal: false,
      pageIndex: 1,
      pageSize: 8,
      curWorkIndex: 0,
      curWorkLabel: '',
      curWorkItem: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      if(this.getWorksList) {
        this.curWorkLabel = this.getWorksList[0].name
        this.curWorkItem = this.getWorksList[0].child
      }
    })

    this.$vgo.on('works:show', () => {
      this.showModal = true
    })
  },
  methods: {
    handlePageChange(val) {
      this.pageIndex = val
    },
    changeWorks(val) {
      this.getWorksList.map(item => {
        if(item.groupid == val) {
          this.curWorkLabel = item.name
          this.curWorkItem = item.child
        }
      })
      setTimeout(() => {
        this.pageIndex = 1
      }, 20)
    },
    switchWork(link) {
      this.$router.push(`${link.split('panoview/')[1]}`)
      this.$router.go(0)
    }
  },
  computed: {
    ...mapGetters(['worksData']),
    getWorksList() {
      if(this.worksData && this.worksData.length > 0) {
        return this.worksData
      }
    },
    getDataLength() {
      return this.curWorkItem.length
    },
    getCurWorkData() {
      if(!!this.curWorkItem.length) {

        return this.curWorkItem.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize)
      }
    }
  },
  components: {
    Pagination
  }
}
</script>

<style lang="stylus">
.works-dialog
  .el-dialog__body
    padding: 10px 20px
    .el-row
      margin-top: 10px
      height: 450px
      overflow: hidden
      .el-col
        margin-top: 10px
        padding: 0 5px
        cursor: pointer

        .time
          font-size: 13px;
          color: #999;
        .bottom
          margin-top: 13px
          line-height: 12px
        .button
          padding: 0
          float: right
        .img-box
          width: 100%
          height: 160px
          display: block
          overflow: hidden
          &:hover
            img
              transform: scale(1.2)
          img
            transition: all .4s linear
            width: 100%
            height: 100%
  .page-container
    position: absolute
    left: 0
    bottom: 17px


</style>
